{% extends 'base_main.html' %}
{% load static %}

{% block ext_css %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'axf/main/css/market.css' %}">
{% endblock %}

{% block ext_js %}
    {{ block.super }}
    <script type="text/javascript" src="{% static 'js/swiper.jquery.js' %}"></script>
    <script type="text/javascript" src="{% static 'axf/main/js/market.js' %}"></script>
{% endblock %}

{% block content %}
    <div id="market">
        {#    左侧导航栏分类    #}
        <aside>
            <ul>
                {% for foot_type in foot_types %}
                    <li>
                        <a href="{% url 'app:market_with_params' type_id=foot_type.type_id child_id=0 order_rule=0 %}">{{ foot_type.type_name }}</a>
                        {% ifequal foot_type.type_id type_id %}
                            <span class="yellowSlide"></span>
                        {% endifequal %}
                    </li>
                {% endfor %}
            </ul>
        </aside>

        <section>
            {#  右侧顶部筛选  #}
            <nav>
                <ul>
                    {# 子类型筛选 #}
                    <li id="all_types">
                        {% for food_type_child_name in food_type_child_name_list %}
                            {% ifequal food_type_child_name.1 child_id %}
                                <span>
                                    {{ food_type_child_name.0 }}
                                    <span class="glyphicon glyphicon-chevron-down"></span>
                                </span>
                            {% endifequal %}
                        {% endfor %}
                    </li>
                    {# 排序筛选 #}
                    <li id="sort_rule">
                        {% for order_rule in order_rule_list %}
                            {% ifequal order_rule.1 order_rule_view %}
                                <span>{{ order_rule.0 }} <span class="glyphicon glyphicon-chevron-down"></span></span>
                            {% endifequal %}
                        {% endfor %}
                    </li>
                </ul>
            </nav>
            {#  右侧商品  #}
            <menu>
                <ul>
                    {% for good in goods_list %}
                        <li>
                            <a href="">
                                {# 商品图片 #}
                                <img src="{{ good.product_img }}" alt="{{ good.product_long_name }}">
                                <div class="shoppingInfo">
                                    {# 商品名称 #}
                                    <h6>{{ good.product_long_name }}</h6>
                                    {# 商品名称 #}
                                    <p class="detailTag">
                                        <span>精选</span>
                                        <span></span>
                                    </p>
                                    {# 商品重量 #}
                                    <p class="unit">{{ good.specifics }}</p>
                                    {# 商品价格 #}
                                    <p class="price">
                                        <span>{{ good.price }}</span>
                                        <s>{{ good.market_price }}</s>
                                    </p>
                                </div>
                            </a>
                            <section>
                                <button>－</button>
                                <span>0</span>
                                <button>＋</button>
                            </section>
                        </li>
                    {% endfor %}

                </ul>
                {# 子分类筛选，实际效果是隐藏，只有点击后才显示 #}
                <div id="all_types_container">
                    <div>
                        {% for food_type_child_name in food_type_child_name_list %}
                            {% ifequal food_type_child_name.1 child_id %}
                                <a href="{% url 'app:market_with_params' type_id=type_id child_id=food_type_child_name.1 order_rule=0 %}">
                                    <button class="btn btn-success">{{ food_type_child_name.0 }}</button>
                                </a>
                            {% else %}
                                <a href="{% url 'app:market_with_params' type_id=type_id child_id=food_type_child_name.1 order_rule=0 %}">
                                    <button class="btn btn-default">{{ food_type_child_name.0 }}</button>
                                </a>
                            {% endifequal %}

                        {% endfor %}
                    </div>
                </div>
                {# 排序选择，实际效果是隐藏，只有点击后才显示 #}
                <div id="sort_rule_container">
                    <div>
                        {% for order_rule in order_rule_list %}
                            {% ifequal order_rule.1 order_rule_view %}
                                <a href="{% url 'app:market_with_params' type_id=type_id child_id=child_id order_rule=order_rule.1 %}">
                                    <button class="btn btn-success">{{ order_rule.0 }}</button>
                                </a>
                            {% else %}
                                <a href="{% url 'app:market_with_params' type_id=type_id child_id=child_id order_rule=order_rule.1 %}">
                                    <button class="btn btn-default">{{ order_rule.0 }}</button>
                                </a>
                            {% endifequal %}
                        {% endfor %}
                    </div>
                </div>
            </menu>
        </section>

    </div>
{% endblock %}